<template>
    <div class="advise-main">
        <div class="com-header">
            <button @click="$router.go(-1)"><i></i></button>
            <span>意见反馈</span>
        </div>
        <!-- 网页内容区域 -->
        <div class="view-content">
            <div class="wrapper">
                <div class="advise">
                    <div class="left"><span>反馈意见：</span></div>
                    <div class="right"><textarea maxlength="200" v-model="adviseStr" cols="30" rows="6" placeholder="请输入您的建议"></textarea></div>
                </div>
                <p class="strCount">{{adviseStr.length}} / 200</p>
                <div class="addimg">
                    <div class="imageFileInput">
                        <img id="imges" :src="fileUrl" alt="" v-if="fileUrl">
                        <input type="file" @change="selectFile" id="file-upload" class="form-control fileInput">
                        <i class="delete-icon" v-if="fileUrl" @click="deleteIcon"></i>
                    </div>
                    <span v-if="!fileUrl">添加图片</span>
                </div>
                <div class="remarks">
                    添加图片不超过1张，文字备注不超过200字
                </div>
                <div class="phone-wrapper">
                    联系电话：<input type="text" v-model="phone" placeholder="请输入您的手机号码">
                </div>
            </div>
            <button @click="submitMethod">反馈</button>
        </div>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
import api from '~/plugins/api.js'
import axios from 'axios'
import qs from 'qs'
export default {
    head: {
        title: '意见反馈  - 快眼看书',
        meta: [{
            name: 'description',
            content: '快眼看书专注于玄幻小说搜索,新版快眼看书,提供最全的小说保持最快的更新,方便大家愉快地阅读玄幻小说'
        },{
            name: 'keyWords',
            content: '意见反馈,快眼看书'
        }]
    },
   data() {
        return {
            adviseStr: "",
            fileStr: null,
            fileUrl: '',
            fileBase64: '',
            phone: '',
            file: null
        };
    },
    mounted() {},
    methods: {
        // 选择文件流
        selectFile () {
            let _this = this
            let file = event.target.files[0]
            this.file = file
            if (!(_this.common.checkFileSize(file) && _this.common.checkFileType(file))) {
                return false
            }
            _this.fileUrl = URL.createObjectURL(file)
            // 转base64
            // let reader = new FileReader()
            // reader.onload = (function (file) {
            //     return function (e) {
            //        _this.fileBase64 = this.result
            //     }
            // })(file)
            // reader.readAsDataURL(file)
            // console.log(_this.fileUrl,_this.file)

        },
        async submitMethod() {
            let _this = this
            if(this.phone){
                var reg = /^1[34578]\d{9}$/;
                var regResult = reg.test(this.phone);
                if(!regResult){
                    Toast('请输入正确手机号码')
                    return
                }
            }
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'  //以表单传数据的格式来传递fromdata
                }
            };
            var formdata = new FormData();
            formdata.append("content", this.adviseStr);
            formdata.append("tel", this.phone);
  	        formdata.append('img',this.file);
            let res = await axios.post(api.feedback,formdata,config)
            if(res){
                if(res.data.status==1){
                    Toast('反馈成功，感谢您的支持')
                    setTimeout(function(){
                        _this.$router.push('/user')
                    },3000)
                }else{
                    Toast(res.data.info)
                }
               
            }
            
        },
        deleteIcon() {
            this.fileUrl = null,
            this.file = null
        }
    },
    components: {}
};
</script>